<template>
  <body>
    <div id="major">
      <div class="content">
        <div class="menuTitle">
          <!-- 面包屑 -->
          <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>数据查询</el-breadcrumb-item>
            <el-breadcrumb-item>专业查询</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <div class="searchArea">
          <div class="searchinput">
            <input
              type="text"
              placeholder="  请输入专业名称"
              v-model="majorName"
              @blur="blur()"
            />
            <button @click="search()">搜索</button>
            <span style="color: rgba(255, 101, 0)">{{ searchInfo }}</span>
          </div>
          <div class="searchchoose">
            <ul :style="{ height: isBroaden ? '78px' : 'auto' }">
              <li class="listSpan">
                <span class="list-key">专业层次</span>
                <i class="iconfont el-icon-arrow-right"></i>
                <div class="more-search">
                  <span
                    v-for="(item, index) in typeList"
                    :key="index"
                    class="linkStyle"
                    :style="{
                      color: active == index ? 'rgba(255,101,0)' : '',
                    }"
                    @click="listBundle(item.name, index)"
                    >{{ item.name }}</span
                  >
                </div>
                <div style="clear: both"></div>
              </li>
              <li class="listSpan">
                <div class="list-key">专业门类</div>
                <i class="iconfont el-icon-arrow-right"></i>
                <div class="more-search">
                  <span
                    class="linkStyle"
                    v-for="(major, majorIndex) in majorList"
                    :key="majorIndex"
                    :style="{
                      color: majorActive == majorIndex ? 'rgba(255,101,0)' : '',
                    }"
                    @click="sonlistBundle(major, majorIndex)"
                  >
                    {{ major }}
                  </span>
                </div>
              </li>
            </ul>
          </div>
        </div>
        <div class="result">
          <div class="resultCard">
            <el-card
              class="grid_item"
              v-for="(item, index) in resultLists"
              :key="index"
              shadow="hover"
            >
              <div class="child_list_all">
                <div class="child_item">
                  <div class="son_list_all">
                    <div class="son_list">
                      <router-link
                        class="son_title"
                        :to="`/major/${item.majorId}`"
                        >{{ item.name }}</router-link
                      >
                      <div class="son_tags">
                        <span>专业代码：{{ item.code }}</span>
                        <span>修业年限：{{ item.majorYear }}</span>
                        <span v-if="isShow" style="height: 16px"
                          >授予学位：{{ item.degree }}</span
                        >
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </el-card>
          </div>
        </div>
        <el-pagination
          class="pagination"
          @current-change="handleCurrentChange"
          :current-page="pagination.page"
          :page-size="pagination.size"
          layout="total, prev, pager, next"
          :total="pagination.count"
          background
        >
        </el-pagination>
      </div>
      <router-view></router-view>
    </div>
  </body>
</template>

<script>
import qs from "qs";
import throttling from "@/public/throttling.js";
export default {
  name: "major",
  data() {
    return {
      // 有效性
      searchInfo: "",
      //初始分页条件
      pagination: {
        page: 1,
        count: 4,
        size: 24,
      },
      stateLists: ["本科", "全部"],
      // 本专科height不同
      isBroaden: true,
      isShow: true,
      // 搜索输入
      majorName: "",
      // 点击专业层次多选 变色
      active: 0,
      // 点击专业门类 变色
      majorActive: 0,
      img: require("@/assets/二维码.png"),
      // name: "",
      majorList: [
        "全部",
        "哲学",
        "经济学",
        "法学",
        "教育学",
        "文学",
        "历史学",
        "理学",
        "工学",
        "农学",
        "医学",
        "管理学",
        "艺术学",
      ],
      typeList: [{ name: "本科" }, { name: "专科" }],
      majorLists: [
        [
          "全部",
          "哲学",
          "经济学",
          "法学",
          "教育学",
          "文学",
          "历史学",
          "理学",
          "工学",
          "农学",
          "医学",
          "管理学",
          "艺术学",
        ],
        [
          "全部",
          "农林牧渔大类",
          "资源环境与安全大类",
          "能源动力与材料大类",
          "土木建筑大类",
          "水利大类",
          "装备制造大类",
          "生物与化工大类",
          "轻工纺织大类",
          "食品药品与粮食大类",
          "交通运输大类",
          "电子与信息大类",
          "医药卫生大类",
          "财经商贸大类",
          "旅游大类",
          "文化艺术大类",
          "新闻传播大类",
          "教育与体育大类",
          "公安与司法大类",
          "公共管理与服务大类",
        ],
      ],
      resultLists: [],
    };
  },
  methods: {
    // 输入框为空时 自动获取所有数据
    blur() {
      if (this.majorName === "") {
        this.searchInfo = "";
        this.$axios
          .get("/searchMajor/" + this.majorName, {
            params: {
              page: this.pagination.page,
              size: this.pagination.size,
            },
          })
          .then((res) => {
            this.resultLists = res.data.list;
          });
      }
    },
    // 点搜索获取符合条件的数据
    search: throttling(function () {
      var reg = /[^\u4E00-\u9FA5]/g;
      if (reg.test(this.majorName)) {
        this.searchInfo = "只能输入汉字！";
        return;
      } else {
        this.$axios
          .get("/searchMajor/" + this.majorName, {
            params: {
              page: this.pagination.page,
              size: this.pagination.size,
            },
          })
          .then((res) => {
            this.resultLists = res.data.list;
            this.pagination.count = res.data.total;
          });
      }
    }, 200),
    // 专业层次
    listBundle: throttling(function (name, index) {
      if (index == 0) {
        this.isBroaden = true;
        this.isShow = true;
      } else {
        this.isBroaden = false;
        this.isShow = false;
      }
      this.active = index;
      this.majorActive = 0;
      this.stateLists.splice(1, 1, "全部");
      this.majorList = this.majorLists[index];
      this.stateLists.splice(0, 1, name);
      this.getLists();
    }, 200),
    // 专业门类
    sonlistBundle: throttling(function (major, majorIndex) {
      if (majorIndex == 0) {
        this.isBroaden = true;
      } else {
        this.isBroaden = false;
      }
      this.majorActive = majorIndex;
      console.log(this.majorActive);
      this.stateLists.splice(1, 1, major);
      console.log();
      this.getLists();
    }, 200),
    // 分页
    handleCurrentChange(page) {
      this.pagination.page = page;
      this.getLists();
      console.log("跳转了");
    },
    // 获取数据
    getLists() {
      this.$axios
        .get("/selectMajor", {
          params: {
            category: this.stateLists[0],
            type: this.stateLists[1],
            page: this.pagination.page,
            size: this.pagination.size,
          },
        })
        .then((res) => {
          console.log(res);
          this.resultLists = res.data.list;
          this.pagination.count = res.data.total;
        });
    },
  },

  created() {
    this.getLists();
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
body {
  width: 100%;
  overflow: hidden;
}

a {
  text-decoration: none;
}

li {
  list-style: none;
}

.content {
  display: flex;
  flex-direction: column;
  width: 100%;
  background-color: #fff;
  margin: 1.6vh auto;
}

.text {
  font-size: 14px;
}

.item {
  padding: 2.9vh 0;
}

.menuTitle {
  height: 4.9vh;
  line-height: 4.9vh;
  text-align: left;
  margin-left: 2.2vw;
}

.el-breadcrumb {
  height: 2.9vh;
  line-height: 2.9vh;
}

.menuTitle .el-breadcrumb__item {
  font-size: 14px;
}

.searchArea {
  position: relative;
  width: 100%;
  min-height: 23.6vh;
}

.searchinput {
  width: 37.1vw;
  height: 8.1vh;
  line-height: 8.1vh;
  margin-left: 2.2vw;
}

.searchinput input {
  border-radius: 5px;
  display: inline-block;
  width: 22.2vw;
  height: 6.5vh;
  line-height: 6.5vh;
  outline: none;
  border: 1px solid rgba(238, 238, 238);
}

.searchinput input:focus {
  border: 1px solid rgba(255, 101, 0);
}

.searchinput button {
  width: 5.9vw;
  height: 6.7vh;
  line-height: 6.7vh;
  text-align: center;
  background-color: rgba(255, 101, 0);
  color: white;
  border: 1px solid rgba(255, 101, 0);
  border-radius: 5px;
}

.searchchoose {
  width: 100%;
}

.searchchoose ul {
  margin-bottom: 0px;
  overflow: hidden;
  position: relative;
  padding-bottom: 1.3vh;
  left: 2.2vw;
  top: 1.6vh;
}

.searchchoose ul li:first-child {
  height: 8.1vh;
}

.searchchoose ul li .list-key {
  color: #000000;
  height: 3.9vh;
  line-height: 3.9vh;
  width: 4.8vw;
  font-size: 15px;
}

.listSpan {
  display: flex;
  flex-direction: row;
}

.listSpan .iconfont {
  float: left;
  font-size: 14px;
  padding: 0.8vh 0.4vw 0px 0px;
  color: #999999;
}

.icon-youhua-:before {
  content: "\e61b";
}

.listSpan .more-search {
  width: 66.7vw;
  left: 7.4vw;
}

.listSpan .more-search .linkStyle {
  padding: 0px 1.5vw 2vh 0px;
  color: #999;
  display: inline-block;
  line-height: 3.9vh;
  font-size: 16px;
}

.listSpan .more-search span:hover {
  color: rgba(255, 101, 0);
  cursor: pointer;
}

.result {
  width: 98%;
  margin-top: 3.3vh;
  margin-left: 1.5vw;
}

.result .resultCard {
  width: 100%;
  min-height: 81.3vh;
}

.grid_item {
  float: left;
  width: 22%;
  margin-bottom: 3.3vh;
}

.grid_item {
  margin-left: 0.7vw;
}

.son_list_all {
  padding: 1.1vw 2.4vh;
  border: 1px solid #eeeeee;
}

.son_list {
  margin-bottom: 1.6vh;
}

.son_title {
  font-size: 18px;
  color: #000000;
  margin-bottom: 1.6vh;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.4s;
}

.son_title:hover {
  color: rgba(255, 101, 0);
}

.son_tags {
  margin-top: 1.3vh;
  cursor: pointer;
}

.son_tags span {
  width: 11.1vw;
  font-size: 14px;
  color: #555555;
  display: block;

  margin-top: 0.8vh;
  line-height: 2.4vh;
}

.specialty-label {
  width: 100%;
  height: 0.2vh;
  background-color: rgba(238, 238, 238);
  font-size: 12px;
  margin-top: 0.8vh;
}

.pagination {
  width: 29.7vw;
  height: 6.5vh;
  line-height: 6.5vh;
  margin: 1.6vh auto;
}
</style>
